<template>
	<div class="fix-bottom" v-show="navigator.isShow" id="fixBottom">
		<!--    <div class="fix-bottom" v-show="showNav">-->
		<div class="main-fix">
			<div :class="numFlag==1? 'actTab':'main-list'" @click="toPushT(1)">
				<div :class="isHome"></div>
				<div class="text" :class="numFlag==1? 'color-text':''">首页</div>
			</div>
			<div :class="numFlag==2? 'actTab':'main-list'" @click="toPushT(2)">
				<div :class="isCashGift"></div>
				<div class="text" :class="numFlag==2? 'color-text':''">下级</div>
			</div>
			<div :class="numFlag==3? 'actTab':'main-list'" @click="toPushT(3)">
				<div :class="isService"></div>
				<div class="text" :class="numFlag==3? 'color-text':''">报表</div>
			</div>
			<div :class="numFlag==4? 'actTab':'main-list'" @click="toPushT(4)">
				<div :class="isMy"></div>
				<div class="text" :class="numFlag==4? 'color-text':''">我的</div>
			</div>
		</div>
	</div>

</template>

<script>
import {mapState} from 'vuex';

export default {
	data() {
		return {
			// bottomNav: 'home',
			bottomNav: 'home',
			// bottomNavColor: 'home',
			bottomNavColor: 'home',
			mainList: 'main-list',
			isHome:'home-on',
			isCashGift: 'cashGift',
			isService: 'service',
			isMy: 'my',
			test: true,
			numFlag: 1,
		}
	},
	beforeRouteLeave(to, from, next) {   
		this.$destroy(true)
		next()
	},
	mounted() {
		if (sessionStorage.length === 0 || sessionStorage.getItem('isSelect') == null || sessionStorage.getItem('isSelect') === undefined) {
			this.bottomNav = 'isHome'
			this.numFlag = 1
			this.toPushT(1);
			// this.handleChange('isHome');
		} else {
			this.numFlag = parseInt(sessionStorage.getItem('isSelect'))
			this.toPushT(this.numFlag);
			// this.handleChange(this.numFlag);
		}
        let loginMark = localStorage.getItem('login_flag')
        if(loginMark !== 'false'){
            this.isLoginPlan()
        }
	},
	created(){
	
	},
	updata() {
		this.bottomNav = 'home';
		this.bottomNavColor = 'home';
	},
	computed: mapState({
		navigator: state => state.common.navigator
	}),
	methods: {
		toPushT(id) {
			this.numFlag = id;
			if (id === 1) {
				this.isHome = 'home-on';
				this.isCashGift = 'cashGift';
				this.isService = 'service';
				this.isMy = 'my';
				this.$router.push('/')
			}
			if (id === 2) {
				this.isHome = 'home';
				this.isCashGift = 'cashGift-on';
				this.isService = 'service';
				this.isMy = 'my';
				this.$router.push('/lowerLevel')
			}
			if (id === 3) {
				this.isHome = 'home';
				this.isCashGift = 'cashGift';
				this.isService = 'service-on';
				this.isMy = 'my';
				this.$router.push("/allReports")
			}
			if (id === 4) {
				this.isHome = 'home';
				this.isCashGift = 'cashGift';
				this.isService = 'service';
				this.isMy = 'my-on';
				this.$router.push("/my")
			}
			sessionStorage.setItem('isSelect', this.numFlag)
		},
		handleChange(val) {
			this.bottomNav = val
			if (this.bottomNav === "isHome") {
				this.isMore = 'isHome-on';
				this.isCashGift = 'cashGift';
				this.isService = 'service';
				this.isMy = 'my';
				this.$router.push('/')
			}
			if (this.bottomNav === "cashGift") {
				this.isHome = 'isHome';
				this.isCashGift = 'cashGift-on';
				this.isService = 'service';
				this.isMy = 'my';
				this.$router.push('/lowerLevel')
			}
			if (this.bottomNav === "service") {
				this.isHome = 'isHome';
				this.isCashGift = 'cashGift';
				this.isService = 'service-on';
				this.isMy = 'my';
				this.$router.push("/allReports")
			}
			if (this.bottomNav === "my") {
				this.isHome = 'isHome';
				this.isCashGift = 'cashGift';
				this.isService = 'service';
				this.isMy = 'my-on';
				this.$router.push("/my")
			}
		},
        isLoginPlan: function () {
			localStorage.setItem("holdPlan", false);
			this.isLogin();
			setInterval(() => {
				if (localStorage.getItem('holdPlan') === 'false') return false;
				localStorage.setItem("holdPlan", false);
				this.isLogin();
			}, 200000)
		},
		isLogin: function () {
			if (localStorage.getItem('login_flag') === 'false') return;
			this.ServerAPI.postAPI(this.API.isLogin, "", (success, data) => {
				localStorage.setItem("holdPlan", true);
				if (success) {
					if (data.code === '9000') {
						this.setLogin(false);
						this.$router.replace({path: '/login'});
					}
					if (data.code === '0000') {
						this.setLogin(true);
					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.fix-bottom {
	z-index: 2000;
	height: 1rem;
}

.text {
	color: #6F788B;
	font-size: .2rem;
}

.color-text {
	position: absolute;
	width: 100%;
	height: 100%;
	color: rgb(0,71,157) !important;
	font-size: .2rem;
	font-weight: bold;
}

.main-fix {
	display: flex;
	justify-content: space-around;
	height: 100%;
	background: #FFFFFF;
	box-shadow:0px 3px 7px 0px #000;
	
	.main-list {
		position: relative;
		width: 25%;
		height: 1rem;
		text-align: center;
	}
}
</style>

